body {
  margin: 0px;
}
/* 
  容器满屏
*/
.container {
  /* 
    box-sizing: border-box;表示盒模型边框大小会被计算到宽高里面
    比如宽度是100px, 边框是1px，那么盒子的总宽会维持在100px
    而盒模型的默认是100px加边框宽度
  */
  box-sizing: border-box;
  border: 10px solid #ff0000;
  /* vh表示浏览器内容可是区域的高度百分比 */
  /* vw表示浏览器内容可是区域的宽度百分比 */
  height: 100vh;
  width: 100vw;
  /* 固定子元素到中间 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container > div {
  border: 1px #ff0000 solid;
  padding: 1rem;
  border-radius: 1rem;
}

/* 固定位置 */
.fixed-box {
  /* 
  position: fixed;
  是固定位置定位模式，不受任何页面大小和滚动的影响，一定会在指定位置出现
  固定定位会丢失盒模型宽度占满的特性
  */
  position: fixed;
  /* 位置通过top,right,bottom,left四个样式控制 */
  right: 1rem;
  top: 40vh;
  border: 1px solid #ff00ff;
}

/* 模拟特殊效果的输入框 */
.myinput {
  /* */
  border: 1px solid #96a5b4;
  padding: 0.5rem;
  border-radius: 2px;
  margin: 1rem;
}

/* 
去掉文本框的边框
重点！！！！！！注意事项！！！！！！
空格也是css选择器
选择器a 选择器b 表示选择器a里面的选择器b（不限层级）
例如 .myinput input表示class为myinput的元素里面所有input元素
*/
.myinput input {
  border-width: 0px;
  outline: none;
  font-size: 1.2rem;
}

/* 
  焦点样式
  :focus-within表示当元素或者它里面的元素拥有焦点时的样式
*/
.myinput:focus-within {
  /* 单独设置边框颜色 */
  border-color: #4892e7;
}
